<style lang="scss">
page{
	background-color: #f5f5f5;
}
.container {
	padding: 16rpx;
}
.region-item {
	margin: 16rpx auto;
	.region-letter{
		display: block;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}
	.region-entity-list {
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		padding: 16rpx;
		.region {
			height: 80rpx;
			line-height: 80rpx;
			width: 33%;
			text-align: center;
			font-size: 14px;
		}
	}
}
.cur-region {
	background-color: #FFFFFF;
	color: #333333;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 16rpx;
	margin: 16rpx auto;
	font-size: 14px;
	.iconfont {
		margin-right: 4px;
	}
}
</style>

<template>
	<view class="container">
		<template v-if="!!curCity">
			<view class="region-title">
				当前城市
			</view>
			<view class="cur-region" @click="selectCity(curCity)">
				<view class="cur-region-left">
					<text class="iconfont">&#xe671;</text> {{curCity.name}}
				</view>
			</view>
		</template>
		<view class="region-title">
			全部城市（按首字母顺序）
		</view>
		<view class="region-item" v-for="r in regionList" :key="r.key">
			<view class="region-letter">
				{{r.key}}
			</view>
			<view class="region-entity-list">
				<view class="region uni-ellipsis-1" v-for="item in r.items" :key="item.id" @click="selectCity(item)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				regionList:[],
				curCity:null
			};
		},
		onLoad() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'I3IBZ-KECLD-LPE4G-HFGQ2-2VMRF-ORFYU'
			});
			
			this.getRegions();
			this.getLocal();
		},
		methods:{
			selectCity(city){
				this.$store.commit("common/setCity",city);
				uni.$emit('regionChanged');
				uni.navigateBack({
					delta: 1
				})
			},
			getRegions(){
				uni.showLoading({
					title:'加载中...'
				})
				this.$http.get('/api/services/app/Region/GetAllCitiesGroupByFirstLetter')
				.then(res=>{
					this.regionList = res.data.result;
					uni.hideLoading();
				});
			},
			getLocal(){
				let self = this;
				uni.getLocation({
					type:'wgs84',
					success(res) {
						qqmapsdk.reverseGeocoder({
							location: {
							  latitude: res.latitude,
							  longitude: res.longitude
							},
							success(r){
								var name = r.result.ad_info.city;
								self.$http.get('/api/services/app/Region/GetRegionByName?name=' + name)
								.then(rg=>{
									let ct = rg.data.result;
									if (!!ct) {
										self.curCity = ct;
									}
								})
							},
							fail(resfail) {
								console.log(resfail);
							}
						});
					}
					
				})
			}
		}
	}
</script>


